<template>
	<view>
		<u-form :model="form" ref="uForm">
			<u-form-item label="姓名" label-width="150rpx"><u-input v-model="form.name" /></u-form-item>
			<u-form-item label="电话"  label-width="150rpx"><u-input v-model="form.mobile" /></u-form-item>
			<u-form-item label="预约时间"  label-width="150rpx"><u-input v-model="form.time" /></u-form-item>
			<u-form-item>
				<button type="default" @click="openDatetimePicker">选择时间</button>
				    <SimpleDateTimePicker
				      ref="myPicker"
				      @submit="handleSubmit"
				      :start-year="2000"
				      :end-year="2030"
				    />
			</u-form-item>
			<u-form-item>
				<u-button type="success" @click="submit">提交</u-button>
			</u-form-item>
		</u-form>
	</view>
</template>

<script>
	import SimpleDateTimePicker from "uni_modules/buuug7-simple-datetime-picker/components/buuug7-simple-datetime-picker/buuug7-simple-datetime-picker.vue";
	import yuyueModel from '../../model/yuyue.js'
	export default {
		components: {
		    SimpleDateTimePicker,
		  },
		data() {
			return {
				form:{
					mobile:'',
					name:'',
					time:''
				}
			}
		},
		methods: {
			  // 打开picker
			    openDatetimePicker() {
			      this.$refs.myPicker.show();
			    },
			
			    // 关闭picker
			    closeDatetimePicker() {
			      this.$refs.myPicker.hide();
			    },
			
			    handleSubmit(e) {
			      // {year: "2019", month: "07", day: "17", hour: "15", minute: "21"}
			      console.log(e);
			      this.form.time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
			    },
				submit(){
					yuyueModel.insert(this.form).then(res=>{
						if(res.code==200){
							uni.showToast({
								title:'预约成功'
							})
							
						}
						
						setTimeout(function(){
							uni.navigateTo({
								url:'./my_yuyue'
							})
						},1000)
					})
					
				}
		}
	}
</script>

<style>

</style>
